<template>
  <div ref="boxContainerRef" class="box-container">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'

const props = defineProps({
  color: {
    type: String,
    default: '#0087dc'
  },
  width: {
    type: Number,
    default: 5
  }
})

const boxContainerRef = ref<HTMLDivElement | null>(null)

onMounted(() => {
  boxContainerRef.value?.style.setProperty('--border-color', props.color)
  boxContainerRef.value?.style.setProperty('--border-width', props.width + 'px')
})
</script>

<style scoped lang="scss">
.box-container {
  position: absolute;
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  left: -10px;
  top: -10px;
  overflow: hidden;
  --border-color: #949494;
  --border-width: 5px;

  span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;

    &::before {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      border: none;
    }

    &:nth-child(1)::before {
      border-top: var(--border-width) solid var(--border-color);
      animation: animateOne 6s linear infinite;
      left: -100%;
    }
    @keyframes animateOne {
      0% {
        left: -100%;
      }
      25% {
        left: 0;
      }
      50%,
      100% {
        left: 100%;
      }
    }
    &:nth-child(2)::before {
      border-right: var(--border-width) solid var(--border-color);
      animation: animateTwo 6s linear infinite;
      animation-delay: 1.5s;
      top: -100%;
      width: calc(100% - var(--border-width));
    }
    @keyframes animateTwo {
      0% {
        top: -100%;
      }
      25% {
        top: 0;
      }
      50%,
      100% {
        top: 100%;
      }
    }

    &:nth-child(3)::before {
      border-bottom: var(--border-width) solid var(--border-color);
      animation: animateThree 6s linear infinite;
      right: -100%;
      animation-delay: 3s;
      height: calc(100% - var(--border-width));
    }
    @keyframes animateThree {
      0% {
        right: -100%;
      }
      25% {
        right: 0;
      }
      50%,
      100% {
        right: 100%;
      }
    }
    &:nth-child(4)::before {
      border-left: var(--border-width) solid var(--border-color);
      animation: animateFour 6s linear infinite;
      animation-delay: 4.5s;
      bottom: -100%;
    }
    @keyframes animateFour {
      0% {
        bottom: -100%;
      }
      25% {
        bottom: 0;
      }
      50%,
      100% {
        bottom: 100%;
      }
    }
  }
}
</style>
